<template>
  <div class="main" v-loading="loading">
    <div v-if="true">
      <el-form ref="form" :model="form" label-width="90px">
        <el-form-item label="设备imei">
          <el-input v-model="form.mobileDeviceId"></el-input>
        </el-form-item>

        <el-form-item label="设备型号">
          <el-input v-model="form.mobileModel"></el-input>
        </el-form-item>

        <el-form-item label="安卓版本号">
          <el-input v-model="form.mobileOsVersion"></el-input>
        </el-form-item>

        <el-alert
          el-alert
          title="不懂别改,会抓包的自行修改。3.3.6 -> 86--3.4.0 -> 90"
          type="warning"
        ></el-alert>
        <!-- <el-alert el-alert title="3.3.6 -> 86|3.4.0 -> 90" type="warning"></el-alert> -->
        <el-form-item label="乐跑版本">
          <el-input v-model="form.version"></el-input>
        </el-form-item>

        <el-form-item label="乐跑版本号">
          <el-input v-model="form.versionName"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button size="small" @click="editVitualDevice">保存</el-button>

          <el-button size="small" @click="bindAndModify">绑定&修改手机</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- append-to-body允许嵌套显示 -->
    <el-drawer
    :with-header="false"
     title="我是里面的"
     :append-to-body="true"
     direction="btt"
     size="40%"
     :visible.sync="innerDrawer">
     <lepao-bind-setting></lepao-bind-setting>
   </el-drawer>
  </div>
</template>

<script>
import { lepaoInfo, lepaoEditInfo } from "@/api/run"
import LepaoBindSetting from './LepaoBindSetting.vue';
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {LepaoBindSetting},
  props: {},
  data() {
    //这里存放数据
    return {
      innerDrawer:false,
        loading: false,
        form: {
            phone: "",
            msgCode: "",
            name: "",
            studentNumber: "",
            uid: "",
            mobileDeviceId: "",
            mobileModel: "",
            mobileOsVersion: "",
            version: "",
            versionName: "",
        },

    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    bindAndModify(){
      this.innerDrawer = true;
    },
    lepaoInfo(){
      lepaoInfo().
      then((data) => {
          const {phone, msgCode, name, studentNumber, uid, mobileDeviceId, mobileModel, mobileOsVersion, versionName, version} = data;
          this.form.phone = phone;
          this.form.msgCode = msgCode;
          this.form.name = name;
          this.form.studentNumber = studentNumber;
          this.form.uid = uid;
          this.form.mobileModel = mobileModel;
          this.form.mobileOsVersion = mobileOsVersion;
          this.form.versionName = versionName;
          this.form.version = version;
          this.form.mobileDeviceId = mobileDeviceId;
      }).catch((err) => {
        this.$message.error(err.message);
      });
    },
    editVitualDevice(){
        this.loading = true;
        lepaoEditInfo(this.form).
        then((result) => {
            // if(result.code === 0){
              console.log(result)
            this.$tips(`${result}`,"success");
            // 回显修改结果
            this.lepaoInfo();
            this.loading = false;
        }).catch((err) => {
            this.$message.error(err.message);
        });


    }
  },
  //声明周期 - 创建完成（可以访问当前this实例）
  created() {
      this.loading = true;
      this.lepaoInfo();
      this.loading = false;
  },
  //声明周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.main{
   margin: 0 20px 0 0;
}
</style>